iT邦幫忙

2022 iThome 鐵人賽

DAY 5
2
Modern Web

今天我想來在 Angular 應用程式上加上測試保護系列 第 5 篇

Day 5 - 單元測試 - 利用 Jasmine 驗證目標程式

  • 分享至 

  • xImage
  •  

前言

上一篇介紹了利用 it 與 describe 方法來撰寫與組織測試案例,今天會繼續完成下面的測試程式,看如何利用 Jasmine 提供的語法驗證目標程式的正確性。

describe('TaiwanDatePipe', () => {
  it('當日期為 2022/09/01 時,應回傳 "民國 111 年 9 月 1 日"', () => {
    // Arrange
    const pipe = new TaiwanDatePipe();
    const targetDate = new Date(2022, 8, 1);

    // Act
    var actual = pipe.transform(targetDate);

    // Assert
    ...
  })
});

目標程式的驗證

當要驗證目標程式時,會先利用 expect 方法來針對執行結果建立預期物件,再透過 Jasmine 提供的 Matcher API 來判斷是否符合預期。例如,在先前測試案例中,就可以如下面程式來驗證 TaiwanDatePipe 管道:

describe('TaiwanDatePipe', () => {
  it('當日期為 2022/09/01 時,應回傳 "民國 111 年 9 月 1 日"', () => {
    // Arrange
    const pipe = new TaiwanDatePipe();
    const targetDate = new Date(2022, 8, 1);

    // Act
    var actual = pipe.transform(targetDate);

    // Assert
    expect(actual).toBe('民國 111 年 9 月 1 日');
  })
});

上面程式使用的 toBe Matcher 方法,常使用於比較如字串 (string)、數值 (number) 與布林 (boolean) 等資料型別是否相等 (===)。如果使用在物件型別時,只會在實際結果與預期兩個物件是為一樣(變數參考相同)才會驗證成功;否則,即使是物件屬性值相同也會驗證失敗。

常用 Matcher API 方法

除了 toBe 方法外,Jasmine 也提供了不少常用的比較方法。

物件型別的比較

當我們要驗證的對象是物件型別時,會使用 toEqual 方法來替代 toBe 方法,Jasmine 會使用深層比較的方式,驗證實際結果與預期兩個物件內的屬性值是否相同。

字串的比較

當我們要驗證字串型別的執行結果時,除了使用 toBe 方法外,Jasmine 還提供了 toContain 方法來比較實際執行結果是否包含有預期的字串。以及 toMatch 方法讓我們可以利用 RegExp 表示式來驗證實際值。

布林值的比較

同樣的,Jasmine 也提供了 toTrue 與 toFalse 兩個方法來比較布林型別的值。另外,若是要驗證實體值是不是為 0、false、undefined 或 null 等 falsy 的值時,可以使用 toFalsy 方法;反之,如果是 truthy 值時則可以使用 toTruty 方法。

其他

除了針對實際值的比較外,Jasmine 也提供了 toHaveClass 方法來驗證 Dom 元素是否有預期的 CSS 類別名稱。

Jasmine 的生命週期鉤子

最後,Jasmine 也提供了四個生命週期鉤子,依執行順序分別是:

beforeAll

此方法會在所有的測試案例或群組執行之前只被呼叫一次,其語法為:

beforeAll(() => {});

beforeEach

此方法會在每一個測試案例或群組執行之前被呼叫一次,其語法為:

beforeEach(() => {});

因此,在先前的範例中,我們可以如下面程式,在此方法中進行 CalculatorService 服務的實體化。

describe('TaiwanDatePipe', () => {
  let pipe: TaiwanDatePipe;

  beforeEach(() => {
    pipe = new TaiwanDatePipe();
  });

  it('當日期為 2022/09/01 時,應回傳 "民國 111 年 9 月 1 日', () => {
    ...
  });

  it('當日期為 1900/09/01 時,應回傳 "民國前 11 年 9 月 1 日', () => {
    ...
  });
});

afterEach

此方法會在每一個測試案例或群組執行完後被呼叫一次,其語法為:

afterEach(() => {});

afterAll

此方法會在所有的測試案例或群組執行完後只被呼叫一次,其語法為:

afterAll(() => {});

執行測試程式

最後,我們可以在 Terminal 裡執行 ng test 命令來執行測試程式,來確認是否測試正確。

https://ithelp.ithome.com.tw/upload/images/20220920/201096450KTc7mAtGK.png

接下來

目前我們大致上介紹了 Jasmine 基本的語法,而這篇針對民國年管道的測試程式,也會放在 GitHub 中。接下來會說明如何針對 Angular 的元件 (Component)、指令 (Directive) 與服務 (Service) 等不同類型的元件進行測試。


上一篇
Day 4 - 單元測試 - 利用 Jasmine 撰寫測試案例
下一篇
Day 6 - 單元測試 - 測試 Angular 服務
系列文
今天我想來在 Angular 應用程式上加上測試保護 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言